<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">
<head>
    <meta charset="UTF-8">
    <title th:text="#{menu.info.tip}"></title>
</head>
<body>
<!--页面标椎化-->
<div th:replace="common/common::html"></div>

<div>
    <nav>
        <span th:text="#{menu.info.tip}"></span>
        <ul id="menu-left-tree-ul-id" class="ztree"></ul>
    </nav>
    <article style="flex-grow: 1">
        <form id="modify-menu-info-form-id" th:action="@{/menu/modifyMenuInfoById}"
              method="post">
            <fieldset>
                <legend>
                    <span th:text="#{common.base}"></span>
                </legend>
                <div class="form-tow-column">
                    <div class="form-group">
                        <span for="mod-menu-id" th:text="#{menu.id}"> </span>
                        <input name="menuId" id="mod-menu-id" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-name-id" th:text="#{menu.name}"></span>
                        <input name="menuName" id="mod-menu-name-id" class="form-control" regex="^.{1,50}$"
                               tip="input 1 to 50 char">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-type-id" th:text="#{menu.type}"> </span>
                        <select gdmt:dicselect="menu.type" class="form-control" id="mod-menu-type-id" name="menuType"
                                regex="^\d$" tip="please choose"></select>
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-type-id" th:text="#{menu.level}"></span>
                        <select gdmt:dicselect="menu.level" class="form-control" id="mod-menu-level-id"
                                name="menuLevel"></select>
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-url-id">URL</span>
                        <input name="menuUrl" id="mod-menu-url-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-privilege-code-id" th:text="#{menu.privilege.code}"> </span>
                        <input name="privilegeCode" id="mod-menu-privilege-code-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-icon-id" th:text="#{menu.menu.icon}"></span>
                        <input name="menuIcon" id="mod-menu-icon-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-http-id" th:text="#{menu.menu.http}"> </span>
                        <select gdmt:dicselect="menu.https" class="form-control" id="mod-menu-http-id" name="isHttps"
                                value="0"></select>
                    </div>
                </div>
            </fieldset>
        </form>
    </article>
    <a href="#" class="btn" onclick="modifyMenuInfo();">
        <i class="glyphicon glyphicon-modal-window"></i>
        <span th:text="#{common.modify}"></span>
    </a>
</div>
<!--消息弹框-->
<div id="dialog-id"></div>
<!--添加对话框-->
<div id="add-menu-info-dialog-id" style="display: none">
    <form id="add-menu-info-form-id" th:action="@{/menu/addMenuInfoById}"
          method="post">
        <div class="form-group">
            <span for="add-menu-name-id" th:text="#{menu.name}"></span>
            <input name="menuName" id="add-menu-name-id" class="form-control" regex="^.{1,50}$"
                   tip="input 1 to 50 char">
        </div>
        <div class="form-group">
            <span for="add-menu-type-id" th:text="#{menu.type}"> </span>
            <select gdmt:dicselect="menu.type" class="form-control" id="add-menu-type-id" name="menuType" regex="^\d$"
                    tip="please choose"></select>
        </div>
        <div class="form-group">
            <span for="add-menu-type-id" th:text="#{menu.level}"> </span>
            <select gdmt:dicselect="menu.level" class="form-control" id="add-menu-level-id" name="menuLevel"
                    regex="^\d$" tip="please choose"></select>
        </div>
        <div class="form-group">
            <span for="add-menu-url-id">URL</span>
            <input name="menuUrl" id="add-menu-url-id" class="form-control"
                   regex="^([a-z,A-Z]([a-z,A-Z,0-9]|_)*(/[a-z,A-Z]([a-z,A-Z,0-9]|_)*)*)?$" tip="please input url">
        </div>
        <div class="form-group">
            <span for="add-menu-privilege-code-id" th:text="#{menu.privilege.code}"> </span>
            <input name="privilegeCode" id="add-menu-privilege-code-id" class="form-control" regex="^\w*$"
                   tip="please input char 、number、_ ">
        </div>
        <div class="form-group">
            <span for="add-menu-icon-id" th:text="#{menu.menu.icon}"></span>
            <input name="menuIcon" id="add-menu-icon-id" class="form-control" regex="^.+$"
                   tip="please input icon class ">
        </div>
        <div class="form-group">
            <span for="add-menu-http-id" th:text="#{menu.menu.http}"> </span>
            <select gdmt:dicselect="menu.https" class="form-control" id="add-menu-http-id" name="isHttps" regex="^\d$"
                    tip="please choose"></select>
        </div>
    </form>
</div>
</body>
<script th:inline="javascript">
    //全局变量
    var leftMenuSetting = {
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClickNode
        }
    };

    //左侧树的加载
    function leftMenuLoad() {
        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/menu/getMenuTree}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }

    //ztree回调事件
    function onClickNode(event, treeId, treeNode) {
        //console.info(treeNode.id);
        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/menu/getMenuInfoById}]]*/'',
                data: [{name: "menuId", value: treeNode.id}],
                success: function (data) {
                    var dom = $("#modify-menu-info-form-id .form-control");
                    dom.each(function (index, item) {
                        var nameAttr = $(item).attr("name");
                        // console.info(data[nameAttr]);
                        $(item).val(data[nameAttr]);
                    });

                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }

    //添加菜单
    function addMenuInfo() {
        $("#add-menu-info-form-id").resetForm();
        $("#add-menu-info-dialog-id").dialog('open');
    }

    //准备函数
    $(function () {
        leftMenuLoad();
        //菜单修改
        $("#modify-menu-info-form-id").ajaxForm({
            dataType: "json",
            success: function (data) {
                message(data.msg);
                leftMenuLoad();
            },
            error: function () {
                message(/*[[#{common.error}]]*/'');
            },
            complete: function (response, status) {

            }
        });
        //添加菜单
        $("#add-menu-info-form-id").ajaxForm({
            dataType: "json",
            success: function (data) {
                message(data.msg);
                leftMenuLoad();
                $("#add-menu-info-dialog-id").dialog('close');
            },
            error: function () {
                message(/*[[#{common.error}]]*/'');
            },
            complete: function (response, status) {

            }
        });
        $("#add-menu-info-dialog-id").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{menu.add}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var flag = true;
                        var dom = $("#add-menu-info-form-id > div > .form-control");
                        dom.each(function (index, item) {
                            flag &= $(item).verification();
                            console.info(flag);
                        });
                        if (!flag) {
                            return;
                        }
                        $("#add-menu-info-form-id").submit();
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });
    });

    // 信息提示
    function message(contents) {
        $("#dialog-id").html(contents);
        $("#dialog-id").dialog('open');
    }

    //菜单修改
    function modifyMenuInfo() {
        var flag = true;
        var dom = $("#modify-menu-info-form-id > div > .form-control");
        dom.each(function (index, item) {
            flag &= $(item).verification();
            console.info(flag);
        });
        if (!flag) {
            return;
        }
        $("#modify-menu-info-form-id").submit();
    }

    //删除菜单
    function deleteMenuInfo() {
        var modMenuId = $("#mod-menu-id").val();
        if (modMenuId == null || "" === modMenuId) {
            return;
        }
        $.ajax({
            type: 'post',
            async: false,
            dataType: 'json',
            url:/*[[@{/menu/deleteMenuInfoById}]]*/'',
            data: [{name: "menuId", value: modMenuId}],
            success: function (data) {
                message(data.msg);
                $("#modify-menu-info-form-id").resetForm();
                leftMenuLoad();
            },
            error: function (msg) {
                message(/*[[#{common.error}]]*/'');
            }
        });
    }
</script>
</html>
